/**
 * 组件通讯的三种基本方式
 *
 * 兄弟组件之间的数据传递
 *
 */

import React from "react";

class Parent extends React.Component {
  state = {
    lastName: "王",
    msg: "",
  };

  // 父组件定义一个函数传递给<ChildB/>，使得子组件B可以传递消息到父组件
  fn = (msg) => {
    // 父组件拿到子组件B传递的消息，保存到共享状态中。之后传递给子组件A
    this.setState({
      msg: msg,
    });
  };

  render() {
    return (
      <div>
        <div>
          <h1>我是父组件，我姓：{this.state.lastName}</h1>
        </div>
        <div>
          <h3>子组件B的状态：{this.state.msg}</h3>
        </div>
        <hr />
        {/* 父组件将子组件B传递过来的消息传递给子组件A */}
        <ChildA lastName={this.state.lastName} msg={this.state.msg} />
        <hr />
        {/* 将父组件定义的函数传递给子组件B */}
        <ChildB lastName={this.state.lastName} fn={this.fn} />
      </div>
    );
  }
}

class ChildA extends React.Component {
  render() {
    return (
      <div>
        <div>
          <h3>
            我是子组件A，我姓：{this.props.lastName}，子组件B的状态:
            {this.props.msg}
          </h3>
        </div>
      </div>
    );
  }
}

class ChildB extends React.Component {
  // 子组件B拿到父组件传递的方法并调用，将消息传递给父组件
  onBeat = () => {
    this.props.fn("我挨打了");
  };

  render() {
    return (
      <div>
        <div>
          <h3>我是子组件B，我姓：{this.props.lastName}</h3>
        </div>
        <button onClick={this.onBeat}>我挨打了</button>
      </div>
    );
  }
}

export default Parent;
